import React, { useEffect, useRef, useState } from "react";
import { Button, Cascader, Form, Input, Picker, Space } from "antd-mobile";
import { filter, isValidArr } from "@/utils";
import classnames from "classnames";
import { API, CITY, PHONE_REG } from "@/config";
import requewt from "@/utils/requewt";
import callFeedback from "@/components/common/modalFeedback";
import Router, { useRouter } from "next/router";

const pageName = "feedback";
const klassName = pageName.replace(/\./g, '-');

export default function RuleComp({category, handler, close}) {
  const formRef = useRef();
  const [form] = Form.useForm();
  const [loading, setLoading] = useState(false);

  const compHandler = {
    submit: async values => {
      values = filter(values);
      if (!values) return

      setLoading(true);
      const options = {
        method: `POST`,
        headers: {"Content-Type": `multipart/form-data`},
        body: values
      }
      const resp = await requewt(API.user.apply, options);
      setLoading(false);
      if (resp?.error_code !== 0 || resp?.msg !== `ok`) {
        callFeedback({
          title: <div dangerouslySetInnerHTML={{__html: resp?.msg || `失败!`}}>
          </div>
        })
        return
      }

      await handler?.applied()
    }
  }
  return (
    <div className={classnames(`cp-${klassName}`)}>
      <div className="inner">
        <Form form={form}
              onFinish={compHandler.submit}
              ref={formRef}
              layout='vertical'
              footer={
                <>
                  <Button onClick={close} loading={loading} color='primary' size={`small`} className={`act-btn act-btn-bevel`}>
                    取消
                  </Button>

                  <Button type='submit' loading={loading} color='primary' size={`small`} className={`act-btn act-btn-bevel`}>
                    提交
                  </Button>
                </>
              }
              initialValues={{
                category
              }}
        >
          <Form.Item hidden name={`category`}>
            <Input hidden />
          </Form.Item>

          <Form.Item
            name='name'
            label='姓名'
            rules={[{required: true, message: '必填'}]}
          >
            <Input onChange={console.log} placeholder='请输入姓名' />
          </Form.Item>

          <Form.Item
            name='phone'
            label='手机号'
            rules={[
              {required: true, message: `必填`},
              {pattern: PHONE_REG, message: `请输入正确的手机号`}
            ]}
          >
            <Input onChange={console.log} placeholder='请输入手机号' />
          </Form.Item>

          <Form.Item name='intention'
                     label='意向车型'
                     trigger='onConfirm'
                     rules={[{required: true, message: '必填'}]}
                     onClick={async e => {
                       const value = await Picker.prompt({
                         columns: [[
                           {label: `长安览拓者`, value: `长安览拓者`}
                         ]],
                       })
                       form.setFieldValue(`intention`, value?.[0])
                     }}
          >

            <Input disabled placeholder='请选择意向车型' />
          </Form.Item>

          <Form.Item
            name='address'
            label='所在区域'
            trigger='onConfirm'
            rules={[{required: true, message: '必填'}]}
            onClick={async e => {
              const value = await Cascader.prompt({
                options: CITY,
                placeholder: '请选择所在区域',
              })
              form.setFieldValue(`address`, value?.join(`-`))
            }}
          >


            <Input placeholder='请选择所在区域' />
          </Form.Item>
        </Form>
      </div>
    </div>
  )
}

